<template>
  <div class="tab-menu">
    <div class="WxTabMenu">
      <div v-for="(tab ,i ) in tabs" :key="i" class="tab-item" @click="choiceTab(i)">
        <div class="tab" :class="{tabActive:i>0,'activite':current === i}">
          <span class="tab-name">{{ tab }}</span>
        </div>
      </div>
    </div>
    <div class="tab-menu-right">
      <slot name="right"/>
    </div>
  </div>
</template>

<script>
export default {
  name: "WxTabMenu",
  props: ['tabs', 'tabClick', 'index'],
  data() {
    return {
      current: this.index || 0
    }
  },
  methods: {
    choiceTab(index) {
      if (this.current === index) return
      this.current = index
      if (this.tabClick) {
        this.tabClick(index)
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../../assets/styles/common.scss";

.tab-menu {
  padding: 20px 10px;
  margin-bottom: 20px;
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  box-shadow: -4px 4px 4px 0px rgba(0, 0, 0, .1);
  border-radius: 6px;
  background-color: #fff;
  display: flex;
}

.WxTabMenu {
  @include flex-start;
  flex: 1;
}

.tab-item {
  @include flex-start;
  margin-right: 32px;
  position: relative;

  .activite {
    color: #06a2e9;
  }

  .tabActive:before {
    content: "";
    height: 12px;
    display: inline-block;
    border-left: 1px solid #979797;
    position: absolute;
    top: 50%;
    left: -17px;
    transform: translateY(-50%);
  }
}

.tab {
  .tab-name {
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
  }
}

.tab-menu-right {
  @include flex-end;
}
</style>
